<template>
    <div class="bg">
        <div class="video-container">
            <!-- <video ref="myVideo" class="video-fullscreen" autoplay></video>
            <div class="title">预览页</div> -->

            <!-- <div class="video-container"> -->
            <video
                ref="myVideo"
                class="video-fullscreen"
                autoplay
                @play="isPlaying = true"
                @pause="isPlaying = false"
            ></video>
            <div class="title">预览页</div>

            <div class="play-icon-bg" @click="playVideo">
                <img
                    class="play-icon"
                    v-if="isPlaying"
                    src="../../assets/video_pause.png"
                    alt=""
                />
                <img
                    v-else
                    class="play-icon"
                    src="../../assets/video_play.png"
                    alt=""
                />
            </div>
            <div class="button-container">
                <van-button class="shareBtn" type="primary" @click="share"
                    >分享</van-button
                >
                <!-- <button @click="toRecordPage">toRecordPage</button> -->
            </div>
            <!-- </div> -->
        </div>
    </div>
</template>

<script lang="ts" setup name="recordPage">
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { apiUploadFile } from "../../utils/api";
import { useNoloStore } from "../../store";
import {ROUTER_NAME_RECORD_PAGE} from '../../route'
import { wxShare } from "../../utils/wxShare";

const store = useNoloStore();
const router = useRouter();
const route = useRoute();
const videoUrl = ref<string>();
const myVideo = ref<HTMLVideoElement>();
const isPlaying = ref(false);

onMounted(() => {
    videoUrl.value = route.params["videoUrl"] as string;
    myVideo.value.src = videoUrl.value;
});

const playVideo = () => {
    if (myVideo && isPlaying.value === false) {
        myVideo.value.play();
    } else {
        myVideo.value.pause();
    }
};
const share = () => {
    let shareImage =
        "https://hbimg.huaban.com/a2a9a71b293f6664b342e0cefc6e1fccd5f921f83cfa5-RoYLU8_fw658/format/webp";
    wxShare(this, "title", "desc", window.location.href, shareImage);
};
const toRecordPage = () => {
    router.push({
        name: ROUTER_NAME_RECORD_PAGE,
    });
};
</script>

<style lang="less" scoped>
@import url(../../style/index.less);
.bg {
    position: relative;
    // background-color: #000;
    height: 100vh;
    width: 100vw;
    // padding-top: 34px;
    // padding-bottom: 130px;
}
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .play-icon-bg {
        width: 45px;
        height: 45px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        .play-icon {
            width: 100%;
            height: 100%;
        }
    }
}

.video-fullscreen {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 视频铺满容器 */
}

.title {
    position: absolute;
    top: 20px; /* 距离顶部的距离 */
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 24px;
    text-align: center;
}

.button-container {
    position: absolute;
    bottom: 20px; /* 距离底部的距离 */
    left: 50%;
    transform: translateX(-50%);
}

.van-button {
    width: 52vw;
    height: 45px;
    margin: 10px auto;
    line-height: 45px;
    border-radius: 22px;
    color: black;
    font-size: 18px;
    text-align: center;
    background: linear-gradient(318deg, #21d7fe 0%, #42ffe1 47%, #c4ffba 100%);
}
</style>
